<template>
    <div class="admin-home">
        <div class="header">
            <img :src="avatarUrl" alt="cf" />

            <div>
                <p>徐浩然</p>
                <p>年龄：18 活跃度：32</p>
            </div>
        </div>

        <!-- 个人信息编辑 -->
        <van-cell
            title="个人信息"
            icon="friends-o"
            is-link
            @click="$router.push('/edit')"
        ></van-cell>
        <van-cell title="我的评论" icon="comment-o" is-link></van-cell>
        <van-cell title="个人收藏" icon="star-o" is-link></van-cell>

        <van-divider
            :style="{
                color: '#1989fa',
                borderColor: '#1989fa',
                padding: '0 16px'
            }"
        >
            个人操作
        </van-divider>

        <!-- 个人信息操作 -->
        <van-cell
            icon="setting-o"
            title="修改密码"
            is-link
            @click="$router.push('/password')"
        >
        </van-cell>
        <van-cell icon="user-o" title="退出" is-link @click="logout">
        </van-cell>
        <van-cell icon="delete" title="注销" is-link @click="deleteUser">
        </van-cell>
    </div>
</template>

<script>
import avatarUrl from "@/assets/cf.jpg";
export default {
    data() {
        return {
            avatarUrl
        };
    },
    methods: {
        logout() {
            // 清空用户登录状态
            window.sessionStorage.clear();
            // 跳转到登录
            this.$router.push("/login");
        },
        async deleteUser() {
            const res = await this.$http.delete("/users");
            if (res.code !== 204) {
                this.$toast({
                    type: "fail",
                    message: res.message
                });
                return;
            }
            this.$toast({
                type: "success",
                message: "注销成功"
            });
            // 退出
            this.logout();
        }
    }
};
</script>

<style lang="less">
.admin-home {
    .header {
        height: 100px;
        background-color: #e6726d;
        display: flex;
        align-items: center;
        padding: 0 30px;
        color: #fff;

        img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            margin-right: 10px;
        }
    }
}
</style>
